<template>
  <div class="setting">
    <van-nav-bar title="设置" left-arrow @click-left="$router.back()" />
    <van-cell
      title="更换手机号"
      is-link
      :value="store.res.mobile"
      @click="$router.push('/genghSJ')"
    />
    <van-cell
      title="设置密码"
      @click="
        store.res?.remember_token
          ? $router.push('/CZmma')
          : $router.push('/login')
      "
      is-link
    />
    <van-cell title="关于我们" is-link @click="$router.push('/guanyuwom')" />
    <van-cell title="上课短信通知">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-switch
          @change="changeSwitch"
          v-model="store.res.is_msg_notice"
          active-color="rgb(241, 90, 36)"
          size="24px"
        />
      </template>
    </van-cell>
    <div class="btnbox">
      <button @click="pawdLogin" class="btn">退出登录</button>
    </div>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { smsMsgApi } from '../http/api.js'
import { useRouter } from 'vue-router'
export default {
  setup(props) {
    const router = useRouter()
    const store = useCounterStore()
    const data = reactive({})
    // 退出登录
    const pawdLogin = () => {
      console.log('退出')
      store.del()
      router.push('/login')
    }
    // change
    const changeSwitch = async () => {
      let a = store.res.is_msg_notice ? '1' : '0'
      console.log(a)
      const res = await smsMsgApi(a)
      console.log(res)
    }
    return {
      ...toRefs(data),
      pawdLogin,
      changeSwitch,
      store
    }
  }
}
</script>
<style lang="scss" scoped>
.btnbox {
  margin-top: 80px;
  padding: 0 40px;
  box-sizing: border-box;
  .btn {
    width: 100%;
    font-size: 18px;
    line-height: 80px;
    color: #f15a24;
    border: 1px solid #f15a24;
    background-color: #fff;
    border-radius: 10px;
  }
}
</style>
